<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // Object.defineProperty 可以定义和修改对象为可控制对象
      //VUE2.0 底层核心函数

      //1.可以创建一个可控制的对象,(可观察的对象)
      var obj = Object.defineProperty({}, "myname", {
        //死板 一次只能改一个值
        configurable: true,
        enumerable: true,
        get: function () {
          console.log("获取属性的时候执行get方法");
          return "张三";
        },
        set: function (newValue) {
          console.log("设置的时候执行set方法 ,新值是", newValue);
        },
      });

      console.log(obj);
      obj.myname = 111;

      //2.修改一个对象为可控对象
      var obj = {
        name: "张三",
        age: 20,
        height: "180cm",
      }; //如何变成可控对象
      //   console.log(obj);

      //修改obj对象里的age属性为可控属性
      var ageValue = obj.age;
      Object.defineProperty(obj, "age", {
        configurable: true,
        enumerable: true,
        get: function () {
          console.log("get执行的时候执行");
          return ageValue; //这里return值是我们的age值
        },
        set: function (newValue) {
          console.log("新值是", newValue);
          ageValue = newValue;
        },
      });
      console.log(obj);
      obj.age; //触发get函数,然后return obj.age 递归 无限循环 没有结束指向
      obj.age = 40;

      //
      //实现一个观察函数  可以把普通对象转成 可控属性
      function observe(obj) {
        //把obj里的属性都变成  可控属性
      }
    </script>
  </body>
</html>
